<template>
  <el-dialog :visible.sync="visible" :title="title" width="600px" :close-on-click-modal="false">
    <VForm :fieldList="fieldList" label-width="90px" ref="form" v-model="formData"></VForm>
    <div slot="footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="$wait.is('account.role.*Role')">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import VForm from '@/components/VForm';

export default {
  components: {
    VForm,
  },
  data() {
    return {
      visible: false,
      type: 'add',
      formData: {},
      optionsList: [
        {
          value: 'fdj',
          label: '发动机',
          children: [],
        },
        {
          value: 'cp',
          label: '产品',
          children: [],
        },
      ],
    };
  },

  computed: {
    title() {
      const { type } = this;
      return `${type === 'edit' ? '编辑' : '新增'}`;
    },
    fieldList() {
      return [
        {
          type: 'input',
          label: '订单号',
          model: 'num',
          props: {
            placeholder: '请输入订单号',
          },
          rules: [
            {
              required: true,
              message: '请输入订单号',
            },
          ],
        },
        {
          type: 'input',
          label: '厂家代号',
          model: 'factory_no',
          props: {
            placeholder: '请输入厂家代号',
          },
          rules: [
            {
              required: true,
              message: '请输入厂家代号',
            },
          ],
        },
        {
          type: 'input',
          label: '数量',
          model: 'count',
          props: {
            placeholder: '请输入数量',
          },
          rules: [
            {
              required: true,
              message: '请输入数量',
            },
          ],
        },
        {
          type: 'cascader',
          label: '发动机型号或产品件号',
          model: 'engine_materiel',
          props: {
            placeholder: '请选择产品件号',
            options: this.optionsList,
          },
          rules: [
            {
              required: true,
              message: '请选择产品件号',
            },
          ],
        },
        {
          type: 'input',
          label: '产品名称',
          model: 'product_name',
          props: {
            placeholder: '请输入产品名称',
          },
          rules: [
            {
              required: true,
              message: '请输入产品名称',
            },
          ],
        },
        {
          type: 'date',
          label: '交付日期',
          model: 'delivery_date',
          props: {
            placeholder: '请选择交付日期',
          },
          rules: [
            {
              required: true,
              message: '请选择交付日期',
            },
          ],
        },
        // {
        //   type: 'date',
        //   label: '实际完成日期',
        //   model: 'actual_date',
        //   props: {
        //     placeholder: '请选择实际完成日期',
        //   },
        //   rules: [
        //     {
        //       required: true,
        //       message: '请选择实际完成日期',
        //     },
        //   ],
        // },
        {
          type: 'input',
          label: '备注',
          model: 'desc',
          props: {
            placeholder: '请输入备注',
          },
        },
      ];
    },
  },
  created() {
    this.getMateriel();
  },
  methods: {
    // 获取发动机型号
    getMateriel() {
      const apiList = ['ac_engine', 'ad_materiel'];
      apiList.forEach((item, index) => {
        const opt = [];
        this.$api[item]
          .getList({
            page: 1,
            pageSize: 100000,
          })
          .then(({ data }) => {
            data.forEach(child => {
              opt.push({
                value: child.id,
                label: item === 'ac_engine' ? child.model : child.name,
              });
            });
          });
        this.optionsList[index].children = opt;
      });
    },
    show(type = 'add', model) {
      this.visible = true;

      this.type = type;

      this.$nextTick(() => {
        this.reset();
        if (this.type === 'edit') {
          if (model.engine_id) {
            model.engine_materiel = ['fdj', model.engine_id];
          }
          if (model.materiel_id) {
            model.engine_materiel = ['cp', model.materiel_id];
          }

          this.formData = {
            ...model,
          };
        }
      });
    },

    close() {
      this.visible = false;
    },

    reset() {
      this.formData = {};
      this.$refs.form && this.$refs.form.resetFields();
    },

    async handleSubmit() {
      const { type } = this;
      let params = await this.$refs.form.submit();
      if (params.engine_materiel[0] === 'fdj') {
        params.engine_id = params.engine_materiel[1];
        params.materiel_id = '';
      }
      if (params.engine_materiel[0] === 'cp') {
        params.engine_id = '';
        params.materiel_id = params.engine_materiel[1];
      }

      await this.$api.ab_salesOrder[`${type}`](params);
      this.$message.success('保存成功！');
      this.close();

      this.$emit('submit');
    },
  },
};
</script>

<style lang="scss" scoped></style>
